<template>
    <div class="header" :class="{'headerChange':isLogo}">
        <router-link to="/classification" tag="div" class="iconfont more" :class="{'moreChange':isLogo}">&#xe612;</router-link>
        <div class="logo" :class="{'logoChange':isLogo}">
            <img src="//gw.alicdn.com/tfs/TB1wQw8qamWBuNjy1XaXXXCbXXa-237-41.png_240x10000.jpg_.webp" alt="">
        </div>
        <router-link to="/login" tag="div" class="login" :class="{'loginChange':isLogo}">
            <a href="#">登录</a>
        </router-link>
        <router-link to="/search" class="search" :class="{'searchChange':isLogo}">
            <div class="iconfont img">&#xe62b;</div>
            <div class="promptMsg">搜索商品、品牌</div>
        </router-link>
    </div>
</template>

<script>
    export default{
        name:"HomeHeader",
        data(){
            return{
                scroll:"",
                isLogo:false
            }
        },
        methods:{
            menu(){
                this.scroll = document.documentElement.scrollTop
                console.log(this.scroll)
                if(this.scroll>=60){
                    this.isLogo = true
                }else{
                    this.isLogo = false
                }
            }
        },
        mounted(){
            window.addEventListener("scroll",this.menu)
        }
    }
</script>

<style lang="stylus" scoped>
.header
    position fixed
    top 0
    left 0
    width 3.75rem
    height 0.9rem
    z-index 100
    background-color: rgb(255, 0, 54)
    transition: all 300ms ease 0ms
    transform: translateY(0)
    .more
        position absolute
        left 0.1rem
        top 0.07rem
        width 0.3rem
        height 0.3rem
        line-height 0.3rem
        font-size 0.2rem
        color #fff   
        transition: all 300ms ease 0ms
        transform: translateY(0)
    .logo
        position absolute
        top 0.11rem
        left 1.285rem
        width 1.18rem
        height 0.2rem
        transform: scale(1)
        transition: all 300ms ease 0ms
        img 
            width 100%
            height 100%
    .logoChange
        transform: scale(0)
        transition: all 300ms ease 0ms    
    .login
        position absolute
        top 0
        right 0.1rem
        width 0.3rem
        height 0.44rem
        line-height 0.44rem
        font-size 0.14rem
        text-align center
        transition: all 300ms ease 0ms
        transform: translateY(0)
        a
            color #fff
    .search
        position absolute
        top 0.44rem
        left 0.1rem
        width 3.55rem
        height 0.36rem
        border-radius 0.04rem
        transition: all 300ms ease 0ms
        transform: scaleX(1) translateY(0px)
        background-color #fff  
        .img 
            position absolute
            top 0
            left 0.1rem
            font-size 0.2rem
            line-height 0.36rem    
            color #dbdbdb  
        .promptMsg
            position absolute
            top 0
            left 0.4rem
            font-size: 0.14rem;
            line-height 0.36rem
            color #dbdbdb
    .searchChange
        transition: all 300ms ease 0ms
        transform: scaleX(0.8) translateY(-1px)       
.headerChange
    transition: all 300ms ease 0ms
    transform: translateY(-0.32rem)    
    .moreChange
        transition: all 300ms ease 0ms
        transform: translateY(0.4rem)    
    .loginChange
        transition: all 300ms ease 0ms
        transform: translateY(0.4rem)      
</style>


